<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-19 17:05
  PageName：h_practice8_icon_all.html
  Function：实战案例 - 图标按钮
  URL：http://localhost:8080/f_image/f5_practice/h_practice8_icon_all.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 图标按钮</title>

    <style type="text/css" media="screen">
        @import url(http://fonts.googleapis.com/css?family=Arvo);

        body {
            background: #f8fcd4;
            background: -webkit-linear-gradient(to bottom, #f8fcd4 19%, #dbfacb 100%);
            background: linear-gradient(to bottom, #f8fcd4 19%, #dbfacb 100%);
            background-attachment: fixed;
        }

        body > div {
            text-align: center;
            display: block;
            width: 800px;
            margin: 50px auto;
        }

        @font-face {
            font-family: 'EntypoRegular';
            src: url('font/entypo-webfont.eot');
            src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
            url('font/entypo-webfont.woff') format('woff'),
            url('font/entypo-webfont.ttf') format('truetype'),
            url('font/entypo-webfont.svg#EntypoRegular') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        .button,
        .button-bevel {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            padding: 7px 20px 9px;
            margin: .5em .5em .5em 0;
            cursor: pointer;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
            text-transform: capitalize;
            transition: 0.1s linear;
        }

        .button {
            border-radius: 2px;
            box-shadow: inset rgba(255, 255, 255, 0.3) 1px 1px 0;
        }

        .button:hover,
        .button-bevel:hover {
            color: #fff;
            text-decoration: none;
        }

        .button:active {
            box-shadow: inset rgba(0, 0, 0, 0.4) 0px 0px 6px;
        }

        .rounded {
            border-radius: 20px;
        }

        .orange {
            background: rgb(255, 183, 0);
            background: -webkit-linear-gradient(to bottom, rgba(255, 183, 0, 1) 0%, rgba(255, 140, 0, 1) 100%);
            background: linear-gradient(to bottom, rgba(255, 183, 0, 1) 0%, rgba(255, 140, 0, 1) 100%);
            border: 1px solid #e59500;
        }

        .orange:hover {
            background: rgb(255, 203, 72);
            background: -webkit-linear-gradient(to bottom, rgba(255, 203, 72, 1) 0%, rgba(255, 156, 35, 1) 100%);
            background: linear-gradient(to bottom, rgba(255, 203, 72, 1) 0%, rgba(255, 156, 35, 1) 100%);
        }

        .magenta {
            background: rgb(255, 130, 172);
            background: -webkit-linear-gradient(to bottom, rgba(255, 130, 172, 1) 0%, rgba(247, 37, 129, 1) 100%);
            background: linear-gradient(to bottom, rgba(255, 130, 172, 1) 0%, rgba(247, 37, 129, 1) 100%);
            border: 1px solid #c60a56;
        }

        .magenta:hover {
            background: rgb(255, 155, 189);
            background: -webkit-linear-gradient(to bottom, rgba(255, 155, 189, 1) 0%, rgba(248, 62, 143, 1) 100%);
            background: linear-gradient(to bottom, rgba(255, 155, 189, 1) 0%, rgba(248, 62, 143, 1) 100%);
        }

        .cyan {
            background: rgb(130, 207, 241);
            background: -webkit-linear-gradient(to bottom, rgba(130, 207, 241, 1) 0%, rgba(56, 174, 234, 1) 100%);
            background: linear-gradient(to bottom, rgba(130, 207, 241, 1) 0%, rgba(56, 174, 234, 1) 100%);
            border: 1px solid #3cafcf;
        }

        .cyan:hover {
            background: rgb(153, 216, 244);
            background: -webkit-linear-gradient(to bottom, rgba(153, 216, 244, 1) 0%, rgba(79, 183, 236, 1) 100%);
            ackground: linear-gradient(to bottom, rgba(153, 216, 244, 1) 0%, rgba(79, 183, 236, 1) 100%);
        }

        .red {
            background: #e25b53;
            background: -webkit-linear-gradient(to bottom, #e25b53 0%, #dd2011 100%);
            background: linear-gradient(to bottom, #e25b53 0%, #dd2011 100%);
            border: 1px solid #c42222;
        }

        .red:hover {
            background: #dd7671;
            background: -webkit-linear-gradient(to bottom, #dd7671 0%, #dd2011 100%);
            background: linear-gradient(to bottom, #dd7671 0%, #dd2011 100%);
        }

        .black {
            background: #444444;
            background: -webkit-linear-gradient(to bottom, #444444 0%, #1c1c1c 100%);
            background: linear-gradient(to bottom, #444444 0%, #1c1c1c 100%);
            border: 1px solid #2a2a2a;
        }

        .black:hover {
            background: #686868;
            background: -webkit-linear-gradient(to bottom, #686868 0%, #1c1c1c 100%);
            background: linear-gradient(to bottom, #686868 0%, #1c1c1c 100%);
        }

        .green {
            background: #82cc5d;
            background: -webkit-linear-gradient(to bottom, #82cc5d 0%, #53b73c 100%);
            background: linear-gradient(to bottom, #82cc5d 0%, #53b73c 100%);
            border: 1px solid #429E34;
        }

        .green:hover {
            background: #99cc80;
            background: -webkit-linear-gradient(to bottom, #99cc80 0%, #53b73c 100%);
            background: linear-gradient(to bottom, #99cc80 0%, #53b73c 100%);
        }

        .button-bevel {
            vertical-align: top;
            border-radius: 4px;
            border: none;
            padding: 10px 25px 12px;
        }

        .button-bevel:active {
            position: relative;
            top: 5px;
        }

        .button-bevel.orange {
            box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
        }

        .button-bevel.orange:active {
            box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
        }

        .button-bevel.magenta {
            box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
        }

        .button-bevel.magenta:active {
            box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
        }

        .button-bevel.cyan {
            box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
        }

        .button-bevel.cyan:active {
            box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
        }

        .button-bevel.red {
            box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
        }

        .button-bevel.red:active {
            box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
        }

        .button-bevel.black {
            box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
        }

        .button-bevel.black:active {
            box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
        }

        .button-bevel.green {
            box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
        }

        .button-bevel.green:active {
            box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
        }

        .button span,
        .button-bevel span {
            font-family: 'EntypoRegular';
            font-size: 20px;
            font-weight: normal;
            vertical-align: middle;
            line-height: 0;
            margin-right: .1em;
        }

        .refresh:after {
            content: "h";
            font-size: 34px;
        }

        .shuffle:after {
            content: "f";
            font-size: 34px;
        }

        .preview:after {
            content: "M";
            font-size: 34px;
        }

        .tea:after {
            content: "u";
            font-size: 34px;
        }

        .wifi:after {
            content: "T";
            font-size: 34px;
        }

        .locator:after {
            content: "0";
            font-size: 34px;
        }

        .rss:after {
            content: "S";
            font-size: 34px;
        }

        .cloud:after {
            content: "y";
            font-size: 34px;
        }

        .download:after {
            content: "w";
            font-size: 34px;
        }

        .trash:after {
            content: "I";
            font-size: 34px;
        }

        .rack:after {
            content: "t";
            font-size: 34px;
        }

        .map:after {
            content: "1";
            font-size: 34px;
        }

        .setting:after {
            content: "@";
            font-size: 34px;
        }

        .identity:after {
            content: ".";
            font-size: 34px;
        }

        .navigation:after {
            content: "2";
            font-size: 34px;
        }

        .gallery:after {
            content: "p";
            font-size: 34px;
        }

        .email:after {
            content: "%";
            font-size: 34px;
        }

        .users:after {
            content: "+";
            font-size: 34px;
        }

        .calendar:after {
            content: "P";
            font-size: 34px;
        }

        .link:after {
            content: ">";
            font-size: 34px;
        }

        .time:after {
            content: "N";
            font-size: 34px;
        }

        .folder:after {
            content: "s";
            font-size: 34px;
        }

        .tag:after {
            content: "C";
            font-size: 34px;
        }

        .share:after {
            content: "5";
            font-size: 34px;
        }

        .lock:after {
            content: "U";
            font-size: 34px;
        }

        .unlock:after {
            content: "V";
            font-size: 34px;
        }

        .mic:after {
            content: "O";
            font-size: 34px;
        }

        .love:after {
            content: "6";
            font-size: 34px;
        }

        .star:after {
            content: "7";
            font-size: 34px;
        }

        .like:after {
            content: "8";
            font-size: 34px;
        }

        .phone:after {
            content: "!";
            font-size: 34px;
        }

        .flag:after {
            content: "?";
            font-size: 34px;
        }

        .adduser:after {
            content: "-";
            font-size: 34px;
        }

        .attach:after {
            content: "'";
            font-size: 34px;
        }

        .comment:after {
            content: ":";
            font-size: 34px;
        }

        .edit:after {
            content: "&";
            font-size: 34px;
        }

        .upload:after {
            content: "v";
            font-size: 34px;
        }

        .storage:after {
            content: "x";
            font-size: 34px;
        }

        .photo:after {
            content: "D";
            font-size: 34px;
        }

        .help:after {
            content: "K";
            font-size: 34px;
        }

        .glass:after {
            content: "R";
            font-size: 34px;
        }

        .print:after {
            content: "<";
            font-size: 34px;
        }

        .gadget:after {
            content: '"';
            font-size: 34px;
        }

    </style>
</head>

<body>
<div data-for="beveled">
    <div>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="refresh"></span> Refresh </a>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="shuffle"></span> Shuffle </a>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="preview"></span> Preview </a>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="tea"></span> Tea </a>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="wifi"></span> Wifi </a>
        <a href="javascript:void(0)" class="button-bevel orange"> <span class="locator"></span> Locator </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="rss"></span> Rss </a>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="cloud"></span> Cloud </a>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="download"></span> Download </a>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="trash"></span> Trash </a>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="rack"></span> Rack </a>
        <a href="javascript:void(0)" class="button-bevel magenta"> <span class="map"></span> Map </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="setting"></span> Setting </a>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="identity"></span> Identity </a>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="navigation"></span> Navigation </a>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="gallery"></span> Gallery </a>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="email"></span> Email </a>
        <a href="javascript:void(0)" class="button-bevel cyan"> <span class="users"></span> Users </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="calendar"></span> Calendar </a>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="link"></span> Link </a>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="time"></span> Time </a>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="folder"></span> Folder </a>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="tag"></span> Tag </a>
        <a href="javascript:void(0)" class="button-bevel red"> <span class="share"></span> Share </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="edit"></span> Edit </a>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="upload"></span> Upload </a>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="storage"></span> storage </a>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="photo"></span> photo </a>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="help"></span> help </a>
        <a href="javascript:void(0)" class="button-bevel black"> <span class="comment"></span> comment </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="like"></span> like </a>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="phone"></span> phone </a>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="flag"></span> flag </a>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="adduser"></span> adduser </a>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="attach"></span> attach </a>
        <a href="javascript:void(0)" class="button-bevel green"> <span class="glass"></span> glass </a>
    </div>
</div>

<div data-for="rectangle">
    <div>
        <a href="javascript:void(0)" class="button orange"> <span class="refresh"></span> refresh </a>
        <a href="javascript:void(0)" class="button orange"> <span class="shuffle"></span> shuffle </a>
        <a href="javascript:void(0)" class="button orange"> <span class="preview"></span> preview </a>
        <a href="javascript:void(0)" class="button orange"> <span class="tea"></span> tea </a>
        <a href="javascript:void(0)" class="button orange"> <span class="wifi"></span> wifi </a>
        <a href="javascript:void(0)" class="button orange"> <span class="locator"></span> locator </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button magenta"> <span class="rss"></span> rss </a>
        <a href="javascript:void(0)" class="button magenta"> <span class="cloud"></span> cloud </a>
        <a href="javascript:void(0)" class="button magenta"> <span class="download"></span> download </a>
        <a href="javascript:void(0)" class="button magenta"> <span class="trash"></span> trash </a>
        <a href="javascript:void(0)" class="button magenta"> <span class="rack"></span> rack </a>
        <a href="javascript:void(0)" class="button magenta"> <span class="map"></span> map </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button cyan"> <span class="setting"></span> setting </a>
        <a href="javascript:void(0)" class="button cyan"> <span class="identity"></span> identity </a>
        <a href="javascript:void(0)" class="button cyan"> <span class="navigation"></span> navigation </a>
        <a href="javascript:void(0)" class="button cyan"> <span class="gallery"></span> gallery </a>
        <a href="javascript:void(0)" class="button cyan"> <span class="email"></span> email </a>
        <a href="javascript:void(0)" class="button cyan"> <span class="users"></span> users </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button red"> <span class="calendar"></span> calendar </a>
        <a href="javascript:void(0)" class="button red"> <span class="link"></span> link </a>
        <a href="javascript:void(0)" class="button red"> <span class="time"></span> time </a>
        <a href="javascript:void(0)" class="button red"> <span class="folder"></span> folder </a>
        <a href="javascript:void(0)" class="button red"> <span class="tag"></span> tag </a>
        <a href="javascript:void(0)" class="button red"> <span class="share"></span> share </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button black"> <span class="lock"></span> lock </a>
        <a href="javascript:void(0)" class="button black"> <span class="unlock"></span> unlock </a>
        <a href="javascript:void(0)" class="button black"> <span class="mic"></span> mic </a>
        <a href="javascript:void(0)" class="button black"> <span class="love"></span> love </a>
        <a href="javascript:void(0)" class="button black"> <span class="star"></span> star </a>
        <a href="javascript:void(0)" class="button black"> <span class="comment"></span> comment </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button green"> <span class="like"></span> like </a>
        <a href="javascript:void(0)" class="button green"> <span class="phone"></span> phone </a>
        <a href="javascript:void(0)" class="button green"> <span class="flag"></span> flag </a>
        <a href="javascript:void(0)" class="button green"> <span class="adduser"></span> adduser </a>
        <a href="javascript:void(0)" class="button green"> <span class="attach"></span> attach </a>
        <a href="javascript:void(0)" class="button green"> <span class="glass"></span> glass </a>
    </div>
</div>

<div data-for="rounded">
    <div>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="edit"></span> edit </a>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="upload"></span> upload </a>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="storage"></span> storage </a>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="photo"></span> photo </a>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="help"></span> help </a>
        <a href="javascript:void(0)" class="button rounded orange"> <span class="locator"></span> locator </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="print"></span> print </a>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="gadget"></span> gadget </a>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="download"></span> download </a>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="trash"></span> trash </a>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="rack"></span> rack </a>
        <a href="javascript:void(0)" class="button rounded magenta"> <span class="map"></span> map </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="setting"></span> setting </a>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="identity"></span> identity </a>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="navigation"></span> navigation </a>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="gallery"></span> gallery </a>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="email"></span> email </a>
        <a href="javascript:void(0)" class="button rounded cyan"> <span class="users"></span> users </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button rounded red"> <span class="calendar"></span> calendar </a>
        <a href="javascript:void(0)" class="button rounded red"> <span class="link"></span> link </a>
        <a href="javascript:void(0)" class="button rounded red"> <span class="time"></span> time </a>
        <a href="javascript:void(0)" class="button rounded red"> <span class="folder"></span> folder </a>
        <a href="javascript:void(0)" class="button rounded red"> <span class="tag"></span> tag </a>
        <a href="javascript:void(0)" class="button rounded red"> <span class="share"></span> share </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button rounded black"> <span class="lock"></span> lock </a>
        <a href="javascript:void(0)" class="button rounded black"> <span class="unlock"></span> unlock </a>
        <a href="javascript:void(0)" class="button rounded black"> <span class="mic"></span> mic </a>
        <a href="javascript:void(0)" class="button rounded black"> <span class="love"></span> love </a>
        <a href="javascript:void(0)" class="button rounded black"> <span class="star"></span> star </a>
        <a href="javascript:void(0)" class="button rounded black"> <span class="comment"></span> comment </a>
    </div>

    <div>
        <a href="javascript:void(0)" class="button rounded green"> <span class="like"></span> like </a>
        <a href="javascript:void(0)" class="button rounded green"> <span class="phone"></span> phone </a>
        <a href="javascript:void(0)" class="button rounded green"> <span class="flag"></span> flag </a>
        <a href="javascript:void(0)" class="button rounded green"> <span class="adduser"></span> adduser </a>
        <a href="javascript:void(0)" class="button rounded green"> <span class="attach"></span> attach </a>
        <a href="javascript:void(0)" class="button rounded green"> <span class="glass"></span> glass </a>
    </div>
</div>
</body>
</html>